<template>
  <div
    v-if="channelList.length > 0"
    id="channel-container"
    :class="{ pt40: channelNavFixed && !isVerticalNav }"
  >
    <!-- 水平方向频道导航 -->
    <div
      v-if="!isVerticalNav"
      :class="{ 'channel-nav-fixed': channelNavFixed }"
    >
      <van-tabs
        v-model="activeIndex"
        class="super-brand-channel-tab"
        :line-width="20"
        @click="handleChannelTab"
      >
        <van-tab
          v-for="item in channelList"
          :key="item.id"
          :title="item.name"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="channel-content-wrap">
      <div
        v-if="isVerticalNav"
        class="slide-menu-container"
        :class="{ 'channel-nav-slide-fixed': channelNavFixed }"
      >
        <slideNav
          :list="channelList"
          :curActiveIndex="curTabIndex"
          @changeNavTab="handleChannelTab"
        />
      </div>
      <div
        v-show="isVerticalNav && channelNavFixed"
        class="channel-slide-w"
      ></div>
      <div class="channel-list-wrap">
        <div
          v-for="(value, tabIndex) in channelList"
          :key="tabIndex"
          ref="channelSectionRef"
          :style="{
            minHeight: listMap[value.id].list.length === 0 ? '800px' : 'auto'
          }"
        >
          <div class="channel-title">
            <img v-if="value.imgUrl" :src="value.imgUrl" />
            <p v-else>{{ value.name }}</p>
          </div>
          <template v-if="value.channelType === 1">
            <activity
              v-for="(item, index) in listMap[value.id].list"
              :key="index"
              :activity-obj="item"
              :index="index"
              :isVerticalNav="isVerticalNav"
              :tabName="value.name"
            />
          </template>
          <template v-else-if="value.channelType === 2 && value.showType === 1">
            <product-one-col
              v-for="(item, index) in listMap[value.id].list"
              :key="index"
              :product="item"
              :isVerticalNav="isVerticalNav"
            />
          </template>
          <template v-else-if="value.channelType === 2 && value.showType === 2">
            <div class="channel-list-content">
              <product-two-col
                v-for="(item, index) in listMap[value.id].list"
                :key="index"
                :product="item"
                :isVerticalNav="isVerticalNav"
              />
              <product-empty-col
                v-if="
                  !listMap[value.id].hasNext &&
                    listMap[value.id].list.length % 2 !== 0
                "
                :isVerticalNav="isVerticalNav"
              />
            </div>
          </template>
          <div
            v-if="
              listMap[value.id].hasNext && listMap[value.id].list.length > 0
            "
            class="channel-more"
          >
            <div
              class="btn"
              :style="{
                borderColor: bottomColor,
                color: bottomColor
              }"
              @click.stop="loadMore(listMap[value.id], value.id)"
            >
              查看更多
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import activity from './activity.vue';
import productOneCol from './productOneCol.vue';
import productTwoCol from './productTwoCol.vue';
import productEmptyCol from './productEmptyCol.vue';
export default {
  name: 'channelFloor',
  components: {
    activity,
    productOneCol,
    productTwoCol,
    productEmptyCol
  },
  props: {
    listMap: {
      type: Object,
      default: () => {}
    },
    channelList: {
      type: Array,
      default: () => []
    },
    isVerticalNav: {
      type: Boolean,
      default: false
    },
    channelNavFixed: {
      type: Boolean,
      default: false
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    curTabIndex: {
      type: Number,
      default: 0
    },
    bottomColor: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleChannelTab() {
      this.$emit('tabClick');
    },
    loadMore(data, id) {
      this.$emit('loadMore', data, id);
    }
  }
};
</script>

<style scoped></style>
